<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <dialog>提示框</dialog>
    <input type="button" value="信息" id="btn1">
    <input type="button" value="成功" id="btn2">
    <input type="button" value="失败" id="btn3">
    <input type="button" value="警告" id="btn4">
</body>
<script>
    const obtn1 = document.getElementById("btn1")
    const obtn2 = document.getElementById("btn2")
    const obtn3 = document.getElementById("btn3")
    const obtn4 = document.getElementById("btn4")

    obtn1.onclick = function(){
        const t1 = new Toast({
            message:"这是一句提示信息",
            type:"info"
        })
        const t2 = new Toast({
            message:"这是一句提示信息",
            type:"info"
        })
        const t3 = new Toast({
            message:"这是一句提示信息",
            type:"info"
        })
        const t4 = new Toast({
            message:"这是一句提示信息",
            type:"info"
        })
        console.log(t1 === t2)
        console.log(t1 === t3)
        console.log(t1 === t4)
        console.log(t2 === t4)
        console.log(t4 === t3)
        console.log(t3 === t2)
    }
    obtn2.onclick = function(){
        new Toast({
            message:"xxx成功",
            type:"success"
        })
    }
    obtn3.onclick = function(){
        new Toast({
            message:"xxx失败",
            type:"error"
        })
    }
    obtn4.onclick = function(){
        new Toast({
            message:"注意！危险",
            type:"warning"
        })
    }
    function Toast(ops){
        if(!Toast.obj){
            Toast.obj = {};
            Toast.obj.ele = document.createElement("dialog");
            document.body.appendChild(Toast.obj.ele);
        }
        const that = Toast.obj;
        that.ele.innerHTML = ops.message;
        let color = "";
        if(ops.type === "info"){
            color = "#55f";
        }else if(ops.type === "success"){
            color = "#5f5";
        }else if(ops.type === "error"){
            color = "#f55";
        }else if(ops.type === "warning"){
            color = "yellowgreen";
        }
        that.ele.style.cssText = `border-color:${color};color:${color};display:block;`;
        clearTimeout(that.t);
        that.t = setTimeout(() => {
            that.ele.style.display = "none";
        }, 2000);
        return that;
    }

</script>
</html>